import { FC, Fragment, useState } from 'react';
import { useSelector } from 'react-redux';
import { Input, ConfigProvider, Col, Row, Button, Tooltip, Popover } from 'antd';
import { SearchOutlined, UserOutlined, EllipsisOutlined } from '@ant-design/icons';
import toolListOption, { toolsOpenType } from './tools.tsx';
import LoginComponent from '@/components/LoginComponent/index.tsx';
import Upload from '@/components/Upload/index.tsx';
import Message from '@/components/Message/index.tsx';
import Other from '@/components/Other/index.tsx';
import { themeForHeader, themeForModal } from './theme.tsx';
import { device } from '@/utils/constant.ts';
import UserInfoComp from '@/components/UserInfo';

const { PC, PAD, MOBILE } = device;

const MyHeader: FC<{}> = () => {
  const { deviceType } = useSelector((store: any) => store.screen);
  const userInfo = useSelector((store: any) => store.user);
  const { isLogin } = userInfo;
  /* login-start */
  const [isShowLoginWin, setIsShowLoginWin] = useState<boolean>(false);
  const closeWin = () => {
    setIsShowLoginWin(false);
  };
  /* login-end */
  /* upload-start */
  const [isShowUploadWin, setIsShowUploadWin] = useState<boolean>(false);
  const closeUploadWin = () => {
    setIsShowUploadWin(false);
  };
  /* upload-end */
  /* other-start */
  const [isShowOther, setIsShowOther] = useState<boolean>(false);
  const closeOther = () => {
    setIsShowOther(false);
  };
  /* other-end */
  /* msg-start */
  const [isShowMsg, setIsShowMsg] = useState<boolean>(false);
  const closeMsg = () => {
    setIsShowMsg(false);
  };
  /* msg-end */
  /* tools-open-func */
  const toolsOpenFunc = (type: toolsOpenType) => {
    switch (type) {
      case toolsOpenType.upload:
        setIsShowUploadWin(true);
        break;
      case toolsOpenType.msg:
        setIsShowMsg(true);
        break;
      case toolsOpenType.other:
        setIsShowOther(true);
        break;
    }
  };
  //搜索框变化
  return (
    <Fragment>
      <ConfigProvider theme={themeForHeader}>
        <div className="text-white w-full  h-full mx-0" style={{ backgroundColor: '#1d1f22' }}>
          <Row>
            <Col offset={+`${deviceType === PC ? 5 : 0}`} span={+`${deviceType === PC ? 10 : 15}`} className="flex justify-center items-center">
              <Input className={`text-white max-w-lg mx-2 ${deviceType === PC ? 'h-10' : 'h-16'} duration-100 transition-transform `} suffix={<SearchOutlined className="cursor-pointer hover:scale-125 duration-100 " />} placeholder="搜索"></Input>
            </Col>
            <Col span={9} className="flex">
              <div className="btns ml-auto  flex items-center">
                <div className={`tools`}>
                  {deviceType === PC ? (
                    toolListOption.map((item, index) => (
                      <Tooltip title={item.title} key={index}>
                        <Button type="link" onClick={() => toolsOpenFunc(item.type)} className={`${index + 1 === toolListOption.length ? 'mr-10' : ''}`} size="large" icon={item.icon}></Button>
                      </Tooltip>
                    ))
                  ) : deviceType === PAD || deviceType === MOBILE ? (
                    <Popover
                      trigger="click"
                      content={toolListOption.map((item, index) => (
                        <Tooltip title={item.title} key={index}>
                          <Button type="link" onClick={item.clickFunc} className={`${index + 1 === toolListOption.length && deviceType === PC ? 'mr-10' : ''}`} size="large" icon={item.icon}></Button>
                        </Tooltip>
                      ))}
                    >
                      <Button type="link" icon={<EllipsisOutlined />} size="large" className="mr-5"></Button>
                    </Popover>
                  ) : null}
                </div>
                {!isLogin ? (
                  <Tooltip title="用户登录" className={`${deviceType === PC ? 'mr-10' : 'mr-5'}`}>
                    <Button danger type="primary" onClick={() => setIsShowLoginWin(true)} icon={<UserOutlined className="font-semibold" />}>
                      登录
                    </Button>
                  </Tooltip>
                ) : (
                  <Tooltip>
                    <UserInfoComp></UserInfoComp>
                  </Tooltip>
                )}
              </div>
            </Col>
          </Row>
        </div>
      </ConfigProvider>
      <ConfigProvider theme={themeForModal}>
        {isShowLoginWin ? <LoginComponent isShowLoginWin={isShowLoginWin} close={closeWin} /> : ''}
        {isShowUploadWin ? <Upload isShowUploadWin={isShowUploadWin} close={closeUploadWin} /> : ''}
        {isShowMsg ? <Message isShowMsgWin={isShowMsg} close={closeMsg} /> : ''}
        {isShowOther ? <Other isShowOtherWin={isShowOther} close={closeOther} /> : ''}
      </ConfigProvider>
    </Fragment>
  );
};
export default MyHeader;
